<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Js*打印</title>
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/xing.css">
    <script src="../js/xing.js"></script>
</head>
<body>
    <div class="container1"></div>
    <div class="container2"></div>
</body>
<script>
    function createBlueXing(rows) {
    const container = document.querySelector('.container1');
    for (let i = 0; i < rows; i++) {
        container.innerHTML += '&nbsp;'.repeat(rows - i) + '*'.repeat(2 * i + 1);
        container.innerHTML += '<br>';
    }
    
}
    function createRedXing(rows) {
    const container = document.querySelector('.container2');
    for (let i = rows-1; i >= 0; i--) {
        container.innerHTML += '&nbsp;'.repeat(rows - i) + '*'.repeat(2 * i + 1);
        container.innerHTML += '<br>';
    }
}
    createBlueXing(5);
    createRedXing(5);
</script>


</html>